<template>
    <div>
        <h1>userset</h1>
        <el-form :model="register" label-width="100px">
            <el-form-item label="头像">
                <el-upload class="avatar-uploader" action="#" :show-file-list="false" :before-upload="beforeUpload"
                    :on-success="handleChange" :on-change="onChange" :auto-upload="false" :data="addList">
                    <img v-if="header_pic" :src="header_pic" class="avatar" style="width: 100px" />
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-divider></el-divider>
        </el-form>
        <el-form :model="register" label-width="100px">
            <el-form-item label="用户名" prop="username">
                <el-input type="text" v-model="register.username" :disabled="true" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="register.password" autocomplete="off" />
            </el-form-item>
            <el-form-item label="确认密码" prop="passwordCheck">
                <el-input type="password" v-model="register.passwordCheck" autocomplete="off" />
            </el-form-item>
            <span style="color: red">{{ msg }}</span>
            <el-button @click="submit">修改密码</el-button>
        </el-form>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch, computed } from 'vue';
import { useUserStore } from '@/stores/user';
import { reqPostUpdateUserHeader } from '@/api/user';
import { successMessage, warningMessage } from '@/utils/message';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { RouterName } from '@/router';

const userStore = useUserStore();
const router = useRouter();

const register = reactive({
    username: userStore.username,
    password: '',
    passwordCheck: ''
});
const header_pic = ref(userStore.userInfo.header_pic);
const addList = ref({});
const imageUrl = ref('');
const msg = ref('');


const beforeUpload = (file: File) => {
    const isJPG = file.type === 'image/jpeg';
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isJPG) {
        warningMessage('上传头像图片只能是 JPG 格式!');
    }
    if (!isLt2M) {
        warningMessage('上传头像图片大小不能超过 2MB!');
    }
    return isJPG && isLt2M;
};

const onChange = ({ raw }) => {
    var reader = new FileReader();
    //转base64
    reader.onload = function (e) {
        header_pic.value = e.target.result as string //将图片路径赋值给src
    }
    reader.readAsDataURL(raw);
};

const handleChange = (res: any, file: any) => {
    imageUrl.value = URL.createObjectURL(file.raw);
};
const submit = () => {
    if (register.password !== register.passwordCheck) {
        msg.value = '两次输入的密码不一致，请重新输入！';
        return;
    }
    msg.value = '';
    userStore.userSetPassword(register.password).then(result => {
        successMessage("修改成功")
        userStore.clearLoginInfo();
        router.push({
            name: RouterName.Login
        })
    })
    // 这里可以添加修改密码的请求逻辑
};
watch(header_pic, async (value, oldValue) => {
    if (value !== '') {
        const data = {
            header_pic: value
        };
        try {
            const res = await reqPostUpdateUserHeader(data);

            await userStore.clearLoginInfo();
            successMessage('更新头像成功');

        } catch (ex: any) {
            warningMessage(ex.message);
        }
    }
});
</script>

<style scoped></style>